import { createBehavior, createResource } from '@inbiz/core';
import {
  createComponentStyleSchema,
  createInbizSchema,
  createDecoratorStyleSchema,
} from '@inbiz/setters';
import { Icon as LocaleIcon } from './locale';

export const defaultProps = {
  headerStyle: {
    icon: {
      type: 'icon-html',
    },
  },
  titleOption: {
    value: 'Icon.title',
    status: true,
  },
  style: {},
  fontSize: 14,
  fontColor: 'rgba(120,120,120,1)',
  iconOption: {
    type: 'icon-tubiao',
    size: 36,
  },
  externalAddress: false,
  link: '',
  jumpType: false,
};

export const Icon = createInbizSchema({
  attribute: {
    base: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        'x-display': {
          type: 'string',
          enum: ['visible', 'hidden'],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-component-props': {
            defaultValue: 'visible',
          },
        },
        'x-component-props': {
          type: 'object',
          properties: {
            titleOption: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': 'StatusInput',
            },
            iconOption: {
              type: 'object',
              'x-decorator': 'FormItem',
              'x-component': 'IconPicker',
            },
            fontSize: {
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 12,
                max: 72,
              },
            },
            fontColor: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'ColorInput',
            },
            externalAddress: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Radio.Group',
              enum: [true, false],
            },
            link: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Input',
              'x-reactions': {
                dependencies: ['.externalAddress'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[0] !== true}}',
                  },
                },
              },
            },
            page: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'PageSelect',
              'x-reactions': {
                dependencies: ['.externalAddress'],
                fulfill: {
                  schema: {
                    'x-hidden': '{{$deps[0] !== false}}',
                  },
                },
              },
            },
            jumpType: {
              type: 'boolean',
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              enum: [false, true],
            },
          },
        },
      },
    },
  },
  style: {
    ...createComponentStyleSchema({}),
    ...createDecoratorStyleSchema(),
  },
});

export const Behavior = createBehavior({
  extends: ['Field'],
  name: 'Icon',
  selector: (node: any) => node?.props['x-component'] === 'Icon',
  designerLocales: LocaleIcon,
  designerProps: {
    propsSchema: Icon,
  },
});

export const Resource = createResource({
  icon: 'Icon',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        'x-decorator': 'Container',
        'x-component': 'Icon',
        'x-component-props': defaultProps,
      },
    },
  ],
});
